<template>
	<view class="task">
		<view class="box1">
			<uni-nav-bar title="" :status-bar="true" background-color="#00000000" color="#000" :border='false'
				leftWidth='300rpx'>
				<template #left>
					<view @click="goBack" style="display: flex; align-items: center;">
						<image style="width: 238rpx; height: 58rpx;" :src="imageUrl +'logo.png'" mode=""></image>
					</view>
				</template>
			</uni-nav-bar>
			<view class="cut">
				<text>成长任务</text>
			</view>
		</view>
		<view class="list">
			<image src="/static/logo.png" mode=""></image>
			<view class="">
				<view class="">
					<view class="">
						日常任务
					</view>
					<view class="" v-if="false">
						接受任务
					</view>
					<view class="num">
						(2/10)
					</view>
				</view>
				<view class="">
					<view class="">
						开启视频号橱窗,本...
					</view>
					<view class="">
						15297人已完成
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	const {
		appContext
	} = getCurrentInstance();
	const imageUrl = appContext.config.globalProperties.$imageUrl
	let aa = ref(false)
</script>

<style lang="scss">
	.box1 {
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background: linear-gradient(180deg, rgba(255, 175, 26, 1) 0%, rgba(255, 123, 0, 1) 100%);
	}

	.cut {
		width: 95%;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-bottom: 30rpx;

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.list {
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		padding: 0 24rpx;
		width: 95%;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 30rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		background-color: #fff;

		>view {
			flex: 1;
			padding: 22rpx;
			padding-left: 0;
			box-sizing: border-box;

			// display: flex;
			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
			}

			>view:nth-child(1) {

				// margin-bottom: 12rpx;
				>view:nth-child(1) {
					font-size: 32rpx;
				}

				>view:nth-child(2) {
					opacity: 1;
					border-radius: 50px;
					background: rgb(255, 127, 6);
					font-size: 36 rpx;
					color: #fff;
					padding: 14rpx 20rpx;
				}
			}

			>view:nth-child(2) {
				>view:nth-child(1) {
					font-size: 26rpx;
					color: rgba(102, 102, 102, 1);
				}

				>view:nth-child(2) {
					font-size: 22rpx;
					color: rgba(153, 153, 153, 1);
					padding-top: 20rpx;
				}
			}
		}

		.num {
			font-size: 26rpx;
			text-align: right;
			color: rgba(255, 127, 6, 1) !important;
			background: #fff !important;
		}
	}
</style>